<template>
	<view
		class="skeleton"
		:class="[roundedClass, { 'skeleton-active': active, 'skeleton-dark': dark }, extraClass || '']"
		:style="[{ height: height + 'rpx' }, extraStyle]"
	>
	</view>
</template>

<script>
export default {
	name: 'skeleton',
	props: {
		extraStyle: [Object, Array, String],
		active: Boolean,
		loading: Boolean,
		extraClass: String,
		dark: Boolean,
		height: {
			default: 100,
			type: Number,
		},
		roundedClass: {
			type: String,
			default: "rounded-l"
		}
	},
};
</script>

<style>
.skeleton {
	background: rgba(190, 190, 190, 0.2);
}
.skeleton-dark {
	background: rgba(0, 0, 0, 0.6);
}
.skeleton-active {
	background: linear-gradient(
		90deg,
		rgba(190, 190, 190, 0.2) 25%,
		rgba(129, 129, 129, 0.24) 37%,
		rgba(190, 190, 190, 0.2) 63%
	);
	background-size: 400% 100%;
	-webkit-animation: skeleton-loading 1.4s ease infinite;
	animation: skeleton-loading 1.4s ease infinite;
}
.skeleton-active.skeleton-dark {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 25%, rgba(0, 0, 0, 0.4) 37%, rgba(0, 0, 0, 0.6) 63%);
	background-size: 400% 100%;
}
@-webkit-keyframes skeleton-loading {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}
@keyframes skeleton-loading {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}
</style>
